<template>
	<view class="form-container safe-bottom-distance">
		<u-form :model="formData" label-width="200">
			<u-form-item label="文艺爱好">
				<u-tag style="margin-right: 20rpx;"
				v-for="item in artList"
				:text="item.name"
				:type="item.selected?'primary':'info'"
				mode="dark"
				@click="item.selected = !item.selected"></u-tag>
			</u-form-item>
			<u-form-item label="体育爱好">
				<u-tag style="margin-right: 20rpx;"
				v-for="item in sportList"
				:text="item.name"
				:type="item.selected?'primary':'info'"
				mode="dark"
				@click="item.selected = !item.selected"></u-tag>
			</u-form-item>
			<u-form-item label="其他爱好">
				<u-input v-model="formData.otherLove" clearable></u-input>
			</u-form-item>
			<u-form-item label="其他特长">
				<u-input v-model="formData.otherSpecial" clearable></u-input>
			</u-form-item>
			<u-form-item label="参加社团活动">
				<u-input v-model="formData.clubActive" clearable></u-input>
			</u-form-item>
			<u-form-item label="担任角色">
				<u-input v-model="formData.clubRole" clearable></u-input>
			</u-form-item>
			<u-form-item label="其它备注">
				<u-input v-model="formData.remark" clearable></u-input>
			</u-form-item>
		</u-form>
		<view class="submit-btn">
			<u-button type="success" @click="submit">提 交</u-button>
		</view>
	</view>

</template>

<script setup>
	import {ref,reactive} from "vue"
	import {onLoad,onReady} from "@dcloudio/uni-app"
	import personnelApi from "@/api/personnel"
	import {bindingBean} from "@/utils"
	const formData = reactive({
			  id:"",
		      userId:"",
			  // artLove:"",
			  // sportLove:"",
			  remark:"",
			  clubRole:"",
			  clubActive:"",
			  otherLove:"",
			  otherSpecial:"",
	})
	const artList = reactive([
	      {id:"1",name:"唱歌"},
	      {id:"2",name:"跳舞"},
	      {id:"3",name:"书法"},
	      {id:"4",name:"相声"},
	      {id:"5",name:"小品"},
	      {id:"6",name:"唱戏"},
	      {id:"99",name:"其他"}
	])
	const sportList = reactive([
	  {id:"1",name:"羽毛球"},
	  {id:"2",name:"跳舞"},
	  {id:"3",name:"乒乓球"},
	  {id:"4",name:"足球"},
	  {id:"5",name:"游泳"},
	  {id:"6",name:"唱戏"},
	  {id:"99",name:"其他"}
	])
	const getData = async ()=>{
		const {data} =  await personnelApi.getLoveDataByUser({userId:formData.userId})
		 if(data.sportLove){
		  const sportLove = data.sportLove.split(",")
		  sportList.forEach(item=>sportLove.includes(item.id)&&(item.selected=true))
		}
		if(data.artLove){
		  const artLove = data.artLove.split(",")
		  artList.forEach(item=>artLove.includes(item.id)&&(item.selected=true))
		}
		bindingBean(formData,data)
	}

	const submit = async ()=>{
		await uni.showModal({
			title:"提示",
			content:"确定提交？"
		})
		const params = {...formData}
		params.sportLove = sportList.filter(item=>item.selected).reduce((a,b)=>a?(a+','+b.id):b.id,'')
		params.artLove = artList.filter(item=>item.selected).reduce((a,b)=>a?(a+','+b.id):b.id,'')
		if(params.id){
			await personnelApi.updateLove(params)
		}else{
			await personnelApi.addLove(params)
		}
		uni.showToast({
			icon:"success",
			title:"提交成功"
		})
	}


	onLoad(({userId})=>{
		formData.userId = userId
		getData()
	})

</script>

<style lang="scss" scoped>
	.form-container {
		padding: 20rpx;
		.submit-btn {
			width: 96vw;
			margin: 30rpx auto 20rpx;

		}
	}
</style>
